<template>
  <div class="search">
    <div class="searchbar">
      <form>
        <input type="text" v-model="qurey" @keyup.enter="searchmusic" placeholder="请输入您要搜索的内容..." />
      </form>
    </div>

    <!-- <div class="searchbar">
            <input type="text" v-model="qurey" @keyup.enter="searchmusic">
    </div>-->
    <div class="songlist">
      <ul class="my_fav_list">
        <li class="list" v-for="item in musiclist" :key="item.id">
          <div class="name">
            <b>{{item.songname}}</b>
          </div>
          <div class="play">
            <a :href="'http://y.qq.com/#type=song&id='+item.songid">
              <img class="image" src="../../img/play.png" alt />
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      query: "",
      musiclist: [],
      musicurl: "",
    };
  },
  created() {
    this.musiclist();
  },
  methods: {
    async searchmusic() {
      const res = await this.$http.get("/search?key=" + this.qurey + "?t=0", {
        params: {},
      });
      // console.log(res)
      console.log(res.data.data.list[0].songurl);
      this.musiclist = res.data.data.list;
    },
  },
};
</script>
<style>
.search {
  height: 200px;
}
.my_fav_list {
  margin: 0;
  padding: 0;
  font-size: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  zoom: 1;
}
.list {
  padding: 16px 0;
  border-top: 1px solid #e0e0e0;
  list-style: none;
  list-style-type: none;
  height: 20px;
  text-align: -webkit-match-parent;
  display: list-item;
}

input {
  border: 2px solid #07c160;
  outline: none;
  width: 95%;
  height: 50px;
  padding-left: 13px;
}
.searchbar input,
.searchbar button {
  background: transparent;
}
.searchbar button {
  top: 0;
  right: 0;
}
.searchbar button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #07c160;
}
.image {
  height: 20px;

  width: 20px;
}
.play {
  margin-right: 10px;
  float: right;
  width: 10%;
}
.name {
  float: left;
  width: 80%;

  margin-left: 10px;
}
</style>